<template>
    <div class="contact-list">
        <div class="search-box">
            <el-input v-model="searchText" placeholder="搜索" prefix-icon="el-icon-search" clearable />
        </div>
        <el-scrollbar height="calc(100vh - 60px)">
            <div class="contact-group">
                <div class="group-title">好友</div>
                <div v-for="contact in filteredContacts" :key="contact.id" class="contact-item"
                    :class="{ active: contact.id == activeContact }"
                    @click="$emit('select-contact', contact)">
                    <el-avatar :size="40" :src="contact.avatar" />
                    <div class="contact-info">
                        <div class="contact-name">{{ contact.remark || contact.nickname }}</div>
                        <div class="contact-remark">{{ contact.nickname }}</div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
    contactList: {
        type: Array,
        required: true
    },
    activeContact: {
        type: Number,
        default: null
    }
})

const emit = defineEmits(['select-contact'])

const searchText = ref('')

const filteredContacts = computed(() => {
    if (!searchText.value) return props.contactList
    return props.contactList.filter(contact =>
        contact.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
        contact.remark.toLowerCase().includes(searchText.value.toLowerCase())
    )
})
</script>

<style scoped>
.contact-list {
    height: 100%;
}

.search-box {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.contact-group {
    padding: 10px 0;
}

.group-title {
    padding: 5px 15px;
    font-size: 12px;
    color: #999;
}

.contact-item {
    display: flex;
    padding: 10px 15px;
    align-items: center;
    cursor: pointer;
}

.contact-item:hover {
    background-color: #f5f5f5;
}

.contact-item:active {
    background-color: #e6e6e6;
}

.contact-info {
    margin-left: 10px;
}

.contact-name {
    font-size: 14px;
}

.contact-remark {
    font-size: 12px;
    color: #999;
}
</style>